<template>
    <div class="todoList">
        <ul>
            <MyItem v-for="(item, index) in todoList" :key="item.id"  :list="item" :deleteItem="deleteItem" :changeIsOk="changeIsOk" />
        </ul>
      </div>
</template>
<script>
import MyItem from './MyItem.vue'


export default {
    Name:"MyList",
    components:{
        MyItem
    },
    props:['todoList','deleteItem','changeIsOk']
    //目前还没有学习xd组件的互相传输，只能通过父子的关系实现，移动数据到App上
    // data(){
    //     return{
    //         todoList:[
    //             {id:"001",title:"吃饭",IsOk:true},
    //             {id:"002",title:"打篮球",IsOk:false},
    //             {id:"003",title:"睡觉",IsOk:true},
    //         ]
    //     }
    // }
}
</script>
<style scoped>
    /* ##List */
    .todoList{
        height: auto;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }


    ul{
        list-style-type: none;
        width: 780px;
        padding: 0;
    }

    ul li{
        border: 1px solid #ced4da;
        height: 30px;
        padding-top: 5px;
        padding-left: 10px;
    }

    ul li:first-child{
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

    ul li:last-child{
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }
</style>